<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="DataList Item Drag and Drop" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" AllowDragAndDrop="true" CssClass="DataWebControlStyle" 
                    ItemDragStartEvent="onItemDragStart"
                    ItemDroppedEvent="onItemDropped">
                   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
                   <ItemStyle CssClass="RowStyle" />
                   <HeaderStyle CssClass="HeaderStyle" />
                   <FooterStyle CssClass="FooterStyle" />
                   <HeaderTemplate><h3>Product Information</h3></HeaderTemplate>
                    <ItemTemplate>
                        <h4>
                            {{ Eval(Name) }}
                        </h4>
                        <table border="0">
                            <tr>
                                <td class="ProductPropertyLabel">Category:</td>
                                <td>{{ Eval(CategoryName) }}</td>
                                <td class="ProductPropertyLabel">Supplier:</td>
                                <td>{{ Eval(SupplierName) }}</td>
                            </tr>
                            <tr>
                                <td class="ProductPropertyLabel">Discontinued:</td>
                                <td>{{ Eval(Discontinued) }}</td>
                                <td class="ProductPropertyLabel">Price:</td>
                                <td>{{ Eval(UnitPrice) }}</td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </AjaxData:DataList>
            </td>
        </tr>
        <tr>
            <td style="text-align:right">
                <AjaxData:Pager ID="Pager1" PageSize="5" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>
    <div id="divEvents" class="trace"></div>
    <script type="text/javascript">

        var _dataList;
        var _pager;

        function pageLoad(sender, e)
        {
            _dataList = DataList1;
            _pager = Pager1;
            loadProducts();
        }

        function loadProducts()
        {
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());
            DataService.GetProductList(startIndex, _pager.get_pageSize(), '', '', onProductLoadSuccess);
        }

        function onProductLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _dataList.set_dataSource(result.Rows);
            _dataList.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var product = item.get_dataItem();

                var spnProductName = item.findControl('spnProductName');
                var spnCategory = item.findControl('spnCategory');
                var spnSupplier =  item.findControl('spnSupplier');
                var spnDiscontinued = item.findControl('spnDiscontinued');
                var spnUnitPrice = item.findControl('spnUnitPrice');

                setText(spnProductName, product.Name);
                setText(spnCategory, product.CategoryName);
                setText(spnSupplier, product.SupplierName);
                setText(spnDiscontinued, ((product.Discontinued == true) ? 'Yes' : 'No') );
                setText(spnUnitPrice, product.UnitPrice.localeFormat('C'));
            }
        }

        function onItemDragStart(sender, e)
        {
            var item = e.get_item();
            writeMessage(String.format('Item {0} Drag Started<br/>', item.get_itemIndex()));
        }

        function onItemDropped(sender, e)
        {
            var item = e.get_item();

            writeMessage(String.format('Item Dropped in index {0} from index {1}<br/>', e.get_newIndex(), e.get_oldIndex()));
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            loadProducts();
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

        function writeMessage(message)
        {
            $get('divEvents').innerHTML += message;
        }

    </script>
</asp:Content>